<template>
  <div>
    <div id="container"></div>
    <button @click="addNode">添加节点</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
// Graph（用于创建图形实例）和 Shape（用于定义图形形状）
import { Graph, Shape } from '@antv/x6';
// VueShape 渲染 Vue 组件到图形节点
import { VueShape } from '@antv/x6-vue-shape';

export default {
  name: 'VueX6',
  data() {
    return {
      // Graph 实例，代表整个图形
      graph: null,
      // 已添加的节点数量，用于生成节点的唯一标识
      nodeCount: 0
    };
  },
  mounted() {
    // 初始化图形相关配置和实例
    this.initGraph();
    // 调用 VueShape 构造函数来注册 Vue 形状扩展
    new VueShape({ Graph, Shape });
  },
  methods: {
    initGraph() {
      // 创建 Graph 实例并配置相关属性
      this.graph = new Graph({
        // 指定 Graph 实例渲染的容器
        container: document.getElementById('container'),
        // 开启网格功能
        grid: true,
        // 启用交互功能，节点可拖动
        interacting: {
          nodeMovable: true
        },
        background: {
          color: '#F2F7FA',
        },
      });
    },
    addNode() {
      // 生成节点的唯一标识
      const nodeId = `node-${++this.nodeCount}`;
      // 向 graph 中添加一个新的节点
      this.graph.addNode({
        // 矩形'rect'
        shape: 'rect',
        // 节点在 x 轴的位置
        x: Math.random() * 400,
        // 节点在 y 轴的位置
        y: Math.random() * 300,
        width: 100,
        height: 50,
        attrs: {
          // 节点主体样式
          body: {
            fill: 'yellow'
          },
          // 节点文本样式
          label: {
            text: `节点 ${this.nodeCount}`,
            fill: 'red'
          }
        },
        ports: {
          // 节点端口分组信息，端口可以用于连接其他节点，形成图形关系
          groups: {
            // 顶部
            top: {
              // 位置为顶部
              position: 'top',
              attrs: {
                /**
                 * 配置端口的图形样式
                 * 圆形 circle
                 * 半径（r）像素
                 * 磁吸功能（magnet）
                 * 描边颜色（stroke）
                 * 描边宽度（strokeWidth）
                 * 填充颜色（fill）
                 */
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#333',
                  strokeWidth: 2,
                  fill: '#fff'
                }
              }
            },
            // 底部
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#333',
                  strokeWidth: 2,
                  fill: '#fff'
                }
              }
            }
            //左右也都可以定义，格式如上，注意添加下方items
          },
          // 定义具体的端口项，指定每个端口所属的组以及端口的唯一标识（id）
          items: [
            // 顶部端口，所属组为 'top'，标识为 `${nodeId}-port-top`，通过节点唯一标识来区分不同节点的顶部端口
            { group: 'top', id: `${nodeId}-port-top` },
            { group: 'bottom', id: `${nodeId}-port-bottom` }
          ]
        }
      });
    },

    // 重置 graph 
    reset() {
      this.graph = null;
      this.nodeCount = 0;
      this.initGraph();
    }
  }
};
</script>
<style scoped>
#container {
  width: 800px;
  height: 800px;
  margin: 10px auto;
  border: 1px solid black;
}
</style>